<template>
	<view class="app l_pages" :style="skin">
		<!-- <jnavbar :title="'支付成功'"></jnavbar> -->
		<view class="page_container" scroll-y>
			<!-- <vimage mode="widthFix" class="pay_bg" imgtype="1" src="static/images/pay_bg.png"></vimage> -->
			<view class="pay_bg"></view>
			<view class="pay_cont">
				<view class="banner uni-flex-row">
					<!-- <view class="icon"><vimage imgtype="1" src="static/images/dui.png" mode=""></vimage></view> -->
					<view class="icon"><text class="el-sc-dui5"></text></view>
					<view class="uni-flex-column">
						<text>支付成功！</text>
						<text>感谢您的购买</text>
					</view>
				</view>
				<view class="b_line"></view>
				<view class="card">
					<view class="card_top">
						<text>￥</text>
						<text>{{ total }}</text>
					</view>
					<view class="line"></view>
					<view class="content">
						<view class="uni-flex-row uni-flex-title">
							<text>余额</text>
							<text>{{ usertotal }}</text>
						</view>
					</view>
				</view>
				<view class="lottery-div" v-if="is_limit&&lottery&&lottery.lottery_open" >
					<view class="lottery-txt" @click="stater(lottery.lottery_style)">
						<text>恭喜你获得{{lottery.lottery_number}}次{{lottery.lottery_style==1?'九宫格':'刮刮乐'}}抽奖</text>
						</view>
					<vimage imgtype="1" mode="widthFix" src="static/images/chouj.png"></vimage>
				</view>
				<view class="u-flex u-row-between u-p-l-20 u-p-r-20">
					<u-button type="primary" :custom-style="customStyle" class="btns"  @click="tohome()">回到首页</u-button>
					<u-button type="primary" :custom-style="customStyle" class="btns"  @click="toorder()">查看订单</u-button>
					
				</view>
			</view>
		</view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar"></tab-bar>
		<floatmenu page_id="3"></floatmenu>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			total: '',
			usertotal: 0,
			customStyle: {
				width: '300rpx',
				height: '80rpx',
				
				'border-radius': '40rpx',
				color: '#FFFFFF'
			},
			lottery: null,
			is_limit:false,
			is_money:true
		};
	},
	computed: {
		...mapState({
			hastabbar: state => state.hastabbar,
			UserInfo: state => state.userInfo,
			skin: state => state.skin,
		})
	},
	async onLoad(e) {
		await this.$getWx
		this.total = e.total;
		let _this=this
		this.getjuris('lottery').then(a => {
			if(a.lottery_type==2){
				if(Number(_this.total) - a.lottery_money>0){
					_this.is_money=true
				}else{
					_this.is_money=false
				}
			}
			_this.lottery = a;
			if(a.lottery_open){
				_this.lotterylimit(a.lottery_style)
			}
			
		});
		if (e.type == 1) {
			this.usertotal = util.Subtr(this.UserInfo.total, e.total);
		} else {
			this.usertotal = this.UserInfo.total;
		}
	},
	methods: {
		stater(list_id) {
			if (list_id) {
				this.Jumpurl({
					link: '../prize/index?id=' + list_id,
					type: 1
				});
			}
		},
		lotterylimit(style){
			this.$http('/lottery/limit/'+style,{},'POST').then(res=>{
				this.is_limit=res
			})
		},
		tohome() {
			this.Jumpurl(
				{
					type: 1,
					link: '../index/index'
				},
				'switch'
			);
		},
		toorder(){
			this.Jumpurl({
				link: '../order/list?tab=2',
				type: 1,
				login_type: 2
			});
		},
		logincallback() {}
	}
};
</script>

<style lang="scss" scoped>
.pay_bg {
	width: 100%;
	position: relative;
	height: 400rpx;
	background: var(--main-color);
}
.pay_cont {
	position: absolute;
	top: 0;
	width: 100%;
}
.banner {
	justify-content: center;
	padding-top: 60rpx;

	width: 100%;
	.icon {
		width: 123rpx;
		height: 123rpx;
		background: #ffffff;
		box-shadow: 0px 23rpx 84rpx 0px rgba(43, 115, 255, 0.23);
		border-radius: 50%;
		margin-right: 34rpx;
		color: var(--main-color);
		text-align: center;
		line-height: 123rpx;
		text{
			font-size: 75rpx;
		}
		/deep/.img_box {
			width: 89rpx;
			height: 68rpx;
			margin-top: 38rpx;
			margin-left: 20rpx;
		}
	}
	.uni-flex-column {
		text:first-child {
			font-size: 40rpx;
			font-weight: 500;
			color: #ffffff;
		}
		text:last-child {
			margin-top: 10rpx;
			font-size: 29rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}
}
.b_line {
	width: 688rpx;
	height: 25rpx;
	background:var(--main-color);
	border-radius: 12px;
	margin: 0 auto;
	margin-top: 90rpx;
}
.card {
	margin: 0rpx auto;
	width: 652rpx;
	background-color: #ffffff;
	position: relative;
	top: -12rpx;
	// height: 343px;

	box-shadow: 0px 15rpx 27rpx 0px var(--content-color);
	position: relative;
	.top_bg {
		width: 100%;
		height: 100rpx;
		box-shadow: inset 0px 15px 27px -15px rgba(255, 79, 19, 0.6);
		position: absolute;
		top: 0;
		z-index: 1;
		// background: linear-gradient(180deg, #FF4F13 0%, rgba(255, 79, 19, 0) 100%);
		// opacity: 0.6;
	}
	.card_top {
		// position: absolute;
		// top: 30rpx;
		// z-index: 2;
		box-shadow: inset 0px 30rpx 54rpx -30rpx var(--main-color);
		height: 148rpx;
		width: 100%;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333333;
		font-size: 64rpx;

		text:first-child {
			font-size: 40rpx;
		}
	}
	.line {
		height: 2rpx;
		width: 608rpx;
		background: #909090;
		opacity: 0.3;
		margin: 0 auto;
		&::before {
			content: '';
			display: block;
			width: 10rpx;
			height: 20rpx;
			background: #f4f4f4;
			position: absolute;
			left: 0;
			top: 138rpx;
			border-radius: 0 10rpx 10rpx 0;
			box-shadow: 0px 0rpx 27rpx 0px rgba(255, 79, 19, 0.13) inset;
		}
		&::after {
			content: '';
			display: block;
			width: 10rpx;
			height: 20rpx;
			background: #f4f4f4;
			position: absolute;
			right: 0;
			top: 138rpx;
			border-radius: 10rpx 0 0 10rpx;
			box-shadow: 0px 0rpx 27rpx 0px rgba(255, 79, 19, 0.13) inset;
		}
	}
	.content {
		padding: 22rpx;
		view {
			padding: 15rpx 0;
			font-size: 25rpx;
			text:first-child {
				color: #999999;
			}
			text:last-child {
				color: #333333;
			}
		}
	}
}
.btns {
	margin-top: 60rpx;
}
.lottery-div {
	width: 648rpx;
	margin: 0 auto;
	margin-top: 60rpx;
	position: relative;
	image {
		width: 648rpx;
	}
	.lottery-txt {
		position: absolute;
		top: 0;
		left: 0;
		width: 648rpx;
		height: 164rpx;
		display: flex;
		align-items: center;
		z-index: 5;
		color: #FFFFFF;
		font-size: 30rpx;
		text{
			margin-left: 70rpx;
		}
	}
}
</style>
